<template>
  <div class="file-analysis-wrapper">
    <div class="switchContainer">
      <a-switch checked-children="年度总览" un-checked-children="关1" default-checked @change="onSwitchFChange"/>
      <a-switch checked-children="月度报告" un-checked-children="关2" default-checked @change="onSwitchJChange"/>
    </div>
    <div class="select-annualSummary">
            <span>
                请选择统计的时间：
                <a-select default-value="0" @change="changeYears" style="width: 5rem">
                    <a-select-option value="0">2021</a-select-option>
                    <a-select-option value="1">2020</a-select-option>
                    <a-select-option value="2">2019</a-select-option>
                    <a-select-option value="3">2018</a-select-option>
                    <a-select-option value="4">2017</a-select-option>
                    <a-select-option value="5">2016</a-select-option>
                </a-select> 年
            </span>
      <span v-if="years===2021">
                <a-select placeholder="月份" @change="changeMonths" style="width: 4rem">
                    <a-select-option value="0">--</a-select-option>
                    <a-select-option v-for="i in 12" :value="i" :key="i">{{ i }}</a-select-option>
                </a-select> 月
            </span>
    </div>
    <div class="map">
      <china-map ref="map"></china-map>
    </div>
    <a-divider/>
    <div v-show="showAnnualSummary" id="annualSummary" class="bar-annualSummary"></div>
    <a-divider/>
    <div v-show="showPunishmentInfo" id="punishmentInfo" class="bar-punishmentInfo"></div>
    <a-divider/>
    <div v-show="showPunishmentInfo" id="orgDetailInfo" class="bar-punishmentInfo"></div>
    <a-divider/>
    <div v-show="showPunishmentInfo" id="punishmentFineInfo" class="bar-punishmentInfo"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {mapActions, mapGetters} from "vuex";
import ChinaMap from "../views/chinaMap";

export default {
  name: "fileAnalysis",
  components: {ChinaMap},
  data() {
    return {
      years: 2021,
      months: 0,
      showAnnualSummary: true,
      showPunishmentInfo: true,
    };
  },
  async mounted() {
    document.title = "信息管理-文书分析";
    console.log(this.totalJson);
    await this.initData();
    this.initDemo();
  },
  computed: {
    ...mapGetters([
      "totalJson",
      "fineJson",
      "orgJson",
      "personJson",
      "pieJson",
      "pieFineJson",
      "orgDetailJson",
      "orgDetailFineJson"
    ])
  },
  methods: {
    ...mapActions([
      "get_totalJson",
      "get_fineJson",
      "get_orgJson",
      "get_personJson",
      "get_pieJson",
      "get_pieFineJson",
      "get_orgDetailJson",
      "get_orgDetailFineJson"
    ]),
    onSwitchFChange(data) {
      console.log(data);
      this.showAnnualSummary = data;
    },
    onSwitchJChange(data) {
      console.log(data);
      this.showPunishmentInfo = data;
    },
    async initData() {
      await this.get_totalJson({"year": this.years, "month": this.months});
      await this.get_fineJson({"year": this.years, "month": this.months});
      await this.get_orgJson({"year": this.years, "month": this.months});
      await this.get_personJson({"year": this.years, "month": this.months});
      await this.get_pieJson({"year": this.years, "month": this.months});
      await this.get_pieFineJson({"year": this.years, "month": this.months});
      await this.get_orgDetailJson({"year": this.years, "month": this.months});
      await this.get_orgDetailFineJson({"year": this.years, "month": this.months});
    },
    initDemo() {
      this.initAnnualSummary();
      this.initPunishmentInfo();
      this.initOrgDetailInfo();
      this.initPunishmentFineInfo();
    },
    initAnnualSummary() {
      let annualDom = document.getElementById("annualSummary");
      let annual = echarts.init(annualDom);
      const totalJson = this.totalJson;
      const fineJson = this.fineJson;
      let option = {
        tooltip: {},
        toolbox: {
          show: true,
          feature: {
            dataView: {
              title: "查看数据",
              readOnly: false
            },
            magicType: {
              title: {
                line: "切换为折线图",
                bar: "切换为柱状图"
              },
              type: ["line", "bar"]
            },
            restore: {
              title: "复位"
            },
            saveAsImage: {
              title: "保存为图片"
            }
          },
          top: -4,
          left: 12
        },
        brush: {
          toolbox: ["rect", "polygon", "clear"],
          xAxisIndex: "all"
        },
        title: [
          {
            id: 0,
            text: "2021年罚单年度汇总",
            subtext: "总计 " + totalJson.num,
            left: "28%",
            textAlign: "center"
          },
          {
            id: 1,
            text: "2021年罚金年度汇总(单位: 万元)",
            subtext: "总计 " + fineJson.num,
            left: "28%",
            top: "52%",
            textAlign: "center"
          },
          {
            id: 2,
            text: "2021年罚单月度分布",
            subtext:
                "总计 " + totalJson.num,
            left: "75%",
            textAlign: "center"
          },
          {
            id: 3,
            text: "2021年罚金月度分布(单位: 万元)",
            subtext:
                "总计 " + fineJson.num,
            left: "75%",
            top: "52%",
            textAlign: "center"
          }
        ],
        grid: [
          {
            top: "7%",
            width: "50%",
            bottom: "51%",
            left: 10,
            containLabel: true
          },
          {
            top: "59%",
            width: "50%",
            bottom: 0,
            left: 10,
            containLabel: true
          }
        ],
        xAxis: [
          {
            id: 0,
            type: "category",
            data: Object.keys(totalJson.content),
            axisLabel: {
              interval: 0,
            },
            splitLine: {
              show: false
            }
          },
          {
            id: 1,
            gridIndex: 1,
            type: "category",
            data: Object.keys(fineJson.content),
            axisLabel: {
              interval: 0,
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            id: 0,
            gridIndex: 0,
            max: totalJson.max,
            splitLine: {
              show: false
            }
          },
          {
            id: 1,
            gridIndex: 1,
            max: fineJson.max,
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            id: 0,
            type: "bar",
            stack: "chart",
            z: 3,
            label: {
              position: "top",
              show: true
            },
            data: Object.keys(totalJson.content).map(function (key) {
              return totalJson.content[key];
            })
          },
          {
            id: 1,
            type: "bar",
            stack: "chart",
            silent: true,
            itemStyle: {
              color: "#eee"
            },
            data: Object.keys(totalJson.content).map(function (key) {
              return totalJson.max - totalJson.content[key];
            })
          },
          {
            id: 2,
            type: "bar",
            stack: "component",
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
              position: "top",
              show: true
            },
            data: Object.keys(fineJson.content).map(function (key) {
              return fineJson.content[key];
            })
          },
          {
            id: 3,
            type: "bar",
            stack: "component",
            silent: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: "#eee"
            },
            data: Object.keys(fineJson.content).map(function (key) {
              return fineJson.max - fineJson.content[key];
            })
          },
          {
            id: 4,
            type: "pie",
            radius: [0, "25%"],
            center: ["75%", "25%"],
            data: Object.keys(totalJson.content).map(function (key) {
              return {
                name: key + "(" + (totalJson.content[key] / totalJson.num * 100).toFixed(1) + "%)",
                value: totalJson.content[key]
              };
            })
          },
          {
            id: 5,
            type: "pie",
            radius: [0, "25%"],
            center: ["75%", "75%"],
            data: Object.keys(fineJson.content).map(function (key) {
              return {
                name: key + "(" + (fineJson.content[key] / fineJson.num * 100).toFixed(1) + "%)",
                value: fineJson.content[key]
              };
            })
          }
        ]
      };
      annual.setOption(option);
    },
    initPunishmentInfo() {
      let punishDom = document.getElementById("punishmentInfo");
      let punish = echarts.init(punishDom);
      const orgJson = this.orgJson;
      const personJson = this.personJson;
      let option = {
        tooltip: {},
        toolbox: {
          show: true,
          feature: {
            dataView: {
              title: "查看数据",
              readOnly: false
            },
            restore: {
              title: "复位"
            },
            saveAsImage: {
              title: "保存为图片"
            }
          },
          top: -4,
          left: 12
        },
        brush: {
          toolbox: ["rect", "polygon", "clear"],
          xAxisIndex: "all"
        },
        title: [
          {
            id: 0,
            text: "2021年机构处罚数据汇总",
            subtext: "总计 " + orgJson.num,
            left: "28%",
            textAlign: "center"
          },
          {
            id: 1,
            text: "2021年个人处罚数据汇总",
            subtext: "总计 " + personJson.num,
            left: "28%",
            top: "52%",
            textAlign: "center"
          },
          {
            id: 2,
            text: "2021年机构处罚分布",
            subtext:
                "总计 " + orgJson.num,
            left: "75%",
            textAlign: "center"
          },
          {
            id: 3,
            text: "2021年个人处罚分布",
            subtext:
                "总计 " + personJson.num,
            left: "75%",
            top: "52%",
            textAlign: "center"
          }
        ],
        grid: [
          {
            top: "5%",
            width: "50%",
            bottom: "51%",
            left: 10,
            containLabel: true
          },
          {
            top: "57%",
            width: "50%",
            bottom: 0,
            left: 10,
            containLabel: true
          }
        ],
        xAxis: [
          {
            id: 0,
            type: "value",
            max: orgJson.max,
            splitLine: {
              show: false
            }
          },
          {
            id: 1,
            type: "value",
            max: personJson.max,
            gridIndex: 1,
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            id: 0,
            gridIndex: 0,
            type: "category",
            data: Object.keys(orgJson.content),
            axisLabel: {
              interval: 0,
            },
            splitLine: {
              show: false
            }
          },
          {
            id: 1,
            gridIndex: 1,
            type: "category",
            data: Object.keys(personJson.content),
            axisLabel: {
              interval: 0,
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            id: 0,
            type: "bar",
            stack: "chart",
            z: 3,
            label: {
              position: "right",
              show: true
            },
            data: Object.keys(orgJson.content).map(function (key) {
              return orgJson.content[key];
            })
          },
          {
            id: 1,
            type: "bar",
            stack: "chart",
            silent: true,
            itemStyle: {
              color: "#eee"
            },
            data: Object.keys(orgJson.content).map(function (key) {
              return orgJson.max - orgJson.content[key];
            })
          },
          {
            id: 2,
            type: "bar",
            stack: "component",
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
              position: "right",
              show: true
            },
            data: Object.keys(personJson.content).map(function (key) {
              return personJson.content[key];
            })
          },
          {
            id: 3,
            type: "bar",
            stack: "component",
            silent: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: "#eee"
            },
            data: Object.keys(personJson.content).map(function (key) {
              return personJson.max - personJson.content[key];
            })
          },
          {
            id: 4,
            type: "pie",
            radius: [0, "25%"],
            center: ["75%", "25%"],
            data: Object.keys(orgJson.content).map(function (key) {
              return {
                name: key + "(" + (orgJson.content[key] / orgJson.num * 100).toFixed(1) + "%)",
                value: orgJson.content[key]
              };
            })
          },
          {
            id: 5,
            type: "pie",
            radius: [0, "25%"],
            center: ["75%", "75%"],
            data: Object.keys(personJson.content).map(function (key) {
              return {
                name: key + "(" + (personJson.content[key] / personJson.num * 100).toFixed(1) + "%)",
                value: personJson.content[key]
              };
            })
          }
        ]
      };
      punish.setOption(option);
    },
    initOrgDetailInfo() {
      let orgDetailDom = document.getElementById("orgDetailInfo");
      let orgDetail = echarts.init(orgDetailDom);
      const orgDetailJson = this.orgDetailJson;
      const orgDetailFineJson = this.orgDetailFineJson;
      let option = {
        tooltip: {},
        toolbox: {
          show: true,
          feature: {
            dataView: {
              title: "查看数据",
              readOnly: false
            },
            restore: {
              title: "复位"
            },
            saveAsImage: {
              title: "保存为图片"
            }
          },
          top: -4,
          left: 12
        },
        brush: {
          toolbox: ["rect", "polygon", "clear"],
          xAxisIndex: "all"
        },
        title: [
          {
            id: 0,
            text: "2021年单位处罚数据汇总",
            subtext: "总计 " + orgDetailJson.num,
            left: "28%",
            textAlign: "center"
          },
          {
            id: 1,
            text: "2021年单位罚金数据汇总(单位：万元)",
            subtext: "总计 " + orgDetailFineJson.num,
            left: "28%",
            top: "52%",
            textAlign: "center"
          },
          {
            id: 2,
            text: "2021年单位处罚分布",
            subtext:
                "总计 " + orgDetailJson.num,
            left: "75%",
            textAlign: "center"
          },
          {
            id: 3,
            text: "2021年单位罚金分布(单位：万元)",
            subtext:
                "总计 " + orgDetailFineJson.num,
            left: "75%",
            top: "52%",
            textAlign: "center"
          }
        ],
        grid: [
          {
            top: "5%",
            width: "50%",
            bottom: "51%",
            left: 10,
            containLabel: true
          },
          {
            top: "57%",
            width: "50%",
            bottom: 0,
            left: 10,
            containLabel: true
          }
        ],
        xAxis: [
          {
            id: 0,
            type: "value",
            max: orgDetailJson.max,
            splitLine: {
              show: false
            }
          },
          {
            id: 1,
            type: "value",
            max: orgDetailFineJson.max,
            gridIndex: 1,
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            id: 0,
            gridIndex: 0,
            type: "category",
            data: Object.keys(orgDetailJson.content),
            axisLabel: {
              interval: 0,
            },
            splitLine: {
              show: false
            }
          },
          {
            id: 1,
            gridIndex: 1,
            type: "category",
            data: Object.keys(orgDetailFineJson.content),
            axisLabel: {
              interval: 0,
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            id: 0,
            type: "bar",
            stack: "chart",
            z: 3,
            label: {
              position: "right",
              show: true
            },
            data: Object.keys(orgDetailJson.content).map(function (key) {
              return orgDetailJson.content[key];
            })
          },
          {
            id: 1,
            type: "bar",
            stack: "chart",
            silent: true,
            itemStyle: {
              color: "#eee"
            },
            data: Object.keys(orgDetailJson.content).map(function (key) {
              return orgDetailJson.max - orgDetailJson.content[key];
            })
          },
          {
            id: 2,
            type: "bar",
            stack: "component",
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
              position: "right",
              show: true
            },
            data: Object.keys(orgDetailFineJson.content).map(function (key) {
              return orgDetailFineJson.content[key];
            })
          },
          {
            id: 3,
            type: "bar",
            stack: "component",
            silent: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: "#eee"
            },
            data: Object.keys(orgDetailFineJson.content).map(function (key) {
              return orgDetailFineJson.max - orgDetailFineJson.content[key];
            })
          },
          {
            id: 4,
            type: "pie",
            radius: [0, "25%"],
            center: ["75%", "25%"],
            data: Object.keys(orgDetailJson.content).map(function (key) {
              return {
                name: key + "(" + (orgDetailJson.content[key] / orgDetailJson.num * 100).toFixed(1) + "%)",
                value: orgDetailJson.content[key]
              };
            })
          },
          {
            id: 5,
            type: "pie",
            radius: [0, "25%"],
            center: ["75%", "75%"],
            data: Object.keys(orgDetailFineJson.content).map(function (key) {
              return {
                name: key + "(" + (orgDetailFineJson.content[key] / orgDetailFineJson.num * 100).toFixed(1) + "%)",
                value: orgDetailFineJson.content[key]
              };
            })
          }
        ]
      };
      orgDetail.setOption(option);
    },
    initPunishmentFineInfo() {
      let punishFineDom = document.getElementById("punishmentFineInfo");
      let punishFine = echarts.init(punishFineDom);
      const pieJson = this.pieJson;
      const pieFineJson = this.pieFineJson;
      let option = {
        tooltip: {},
        toolbox: {
          show: true,
          feature: {
            dataView: {
              title: "查看数据",
              readOnly: false
            },
            restore: {
              title: "复位"
            },
            saveAsImage: {
              title: "保存为图片"
            }
          },
          top: -4,
          left: 12
        },
        brush: {
          toolbox: ["rect", "polygon", "clear"],
          xAxisIndex: "all"
        },
        title: [

          {
            id: 1,
            text: "2021年监管层级罚单笔数分布",
            subtext: "总计 " + pieJson.num,
            left: "28%",
            textAlign: "center"
          },
          {
            id: 3,
            text: "2021年监管层级处罚金额分布(单位: 万元)",
            subtext:
                "总计 " + pieFineJson.num,
            left: "75%",
            textAlign: "center"
          }
        ],
        grid: [],
        xAxis: [],
        yAxis: [],
        series: [
          {
            id: 3,
            type: "pie",
            radius: [0, "25%"],
            center: ["25%", "25%"],
            data: Object.keys(pieJson.content).map(function (key) {
              return {
                name: key + "(" + (pieJson.content[key] / pieJson.num * 100).toFixed(1) + "%)",
                value: pieJson.content[key]
              };
            })
          },
          {
            id: 4,
            type: "pie",
            radius: [0, "25%"],
            center: ["75%", "25%"],
            data: Object.keys(pieFineJson.content).map(function (key) {
              return {
                name: key + "(" + (pieFineJson.content[key] / pieFineJson.num * 100).toFixed(1) + "%)",
                value: pieFineJson.content[key]
              };
            })
          }
        ]
      };
      punishFine.setOption(option);
    },
    async changeYears(value) {
      this.years = 2021 - Number(value);
      if (this.years !== 2021) {
        this.months = 0;
      }
      await this.fetchData()
    },
    async changeMonths(value) {
      this.months = Number(value);
      console.log(this.years,this.months)
      await this.fetchData();
    },
    async fetchData() {
      let annualChart = echarts.getInstanceByDom(document.getElementById("annualSummary"));
      let punishChart = echarts.getInstanceByDom(document.getElementById("punishmentInfo"));
      let punishFineChart = echarts.getInstanceByDom(document.getElementById("punishmentFineInfo"));
      let orgDetailFineChart = echarts.getInstanceByDom(document.getElementById("orgDetailInfo"));
      annualChart.showLoading();
      punishChart.showLoading();
      punishFineChart.showLoading();
      orgDetailFineChart.showLoading();
      await this.get_totalJson({"year": this.years, "month": this.months});
      await this.get_fineJson({"year": this.years, "month": this.months});
      await this.get_orgJson({"year": this.years, "month": this.months});
      await this.get_personJson({"year": this.years, "month": this.months});
      await this.get_pieJson({"year": this.years, "month": this.months});
      await this.get_pieFineJson({"year": this.years, "month": this.months});
      await this.get_orgDetailJson({"year": this.years, "month": this.months});
      await this.get_orgDetailFineJson({"year": this.years, "month": this.months});
      await this.$refs.map.updateMapData({"year": this.years, "month": this.months});
      this.updateOptions();
    },
    updateOptions() {
      let that = this;
      let month = (this.months ? (this.months + "月") : "");
      console.log(this.months);

      let annualChart = echarts.getInstanceByDom(document.getElementById("annualSummary"));
      annualChart.setOption({
        title: [
          {
            id: 0,
            text: that.years + "年罚单年度汇总",
            subtext: "总计 " + that.totalJson.num,
          },
          {
            id: 1,
            text: that.years + "年罚金年度汇总(单位: 万元)",
            subtext: "总计 " + that.fineJson.num,
          },
          {
            id: 2,
            text: that.years + "年罚单月度分布",
            subtext: "总计 " + that.totalJson.num,
          },
          {
            id: 3,
            text: that.years + "年罚金月度分布(单位: 万元)",
            subtext: "总计 " + that.fineJson.num,
          }],
        xAxis: [
          {
            id: 0,
            data: Object.keys(that.totalJson.content),
          },
          {
            id: 1,
            data: Object.keys(that.fineJson.content),
          }
        ],
        yAxis: [
          {
            id: 0,
            max: that.totalJson.max,
          },
          {
            id: 1,
            max: that.fineJson.max,
          }
        ],
        series: [
          {
            id: 0,
            data: Object.keys(that.totalJson.content).map(function (key) {
              return that.totalJson.content[key];
            })
          },
          {
            id: 1,
            data: Object.keys(that.totalJson.content).map(function (key) {
              return that.totalJson.max - that.totalJson.content[key];
            })
          },
          {
            id: 2,
            data: Object.keys(that.fineJson.content).map(function (key) {
              return that.fineJson.content[key];
            })
          },
          {
            id: 3,
            data: Object.keys(that.fineJson.content).map(function (key) {
              return that.fineJson.max - that.fineJson.content[key];
            })
          },
          {
            id: 4,
            data: Object.keys(that.totalJson.content).map(function (key) {
              return {
                name: key + "(" + (that.totalJson.content[key] / that.totalJson.num * 100).toFixed(1) + "%)",
                value: that.totalJson.content[key]
              };
            })
          },
          {
            id: 5,
            data: Object.keys(that.fineJson.content).map(function (key) {
              return {
                name: key + "(" + (that.fineJson.content[key] / that.fineJson.num * 100).toFixed(1) + "%)",
                value: that.fineJson.content[key]
              };
            })
          }
        ]
      });
      annualChart.hideLoading();

      let punishChart = echarts.getInstanceByDom(document.getElementById("punishmentInfo"));
      punishChart.setOption({
        title: [
          {
            id: 0,
            text: that.years + "年" + month + "机构处罚数据汇总",
            subtext: "总计 " + that.orgJson.num,
          },
          {
            id: 1,
            text: that.years + "年" + month + "个人处罚数据汇总",
            subtext: "总计 " + that.personJson.num,
          },
          {
            id: 2,
            text: that.years + "年" + month + "机构处罚分布",
            subtext: "总计 " + that.orgJson.num,
          },
          {
            id: 3,
            text: that.years + "年" + month + "个人处罚分布",
            subtext: "总计 " + that.personJson.num,
          }
        ],
        xAxis: [
          {
            id: 0,
            max: that.orgJson.max,
          },
          {
            id: 1,
            max: that.personJson.max,
          }
        ],
        yAxis: [
          {
            id: 0,
            data: Object.keys(that.orgJson.content),
          },
          {
            id: 1,
            data: Object.keys(that.personJson.content),
          }
        ],
        series: [
          {
            id: 0,
            data: Object.keys(that.orgJson.content).map(function (key) {
              return that.orgJson.content[key];
            })
          },
          {
            id: 1,
            data: Object.keys(that.orgJson.content).map(function (key) {
              return that.orgJson.max - that.orgJson.content[key];
            })
          },
          {
            id: 2,
            data: Object.keys(that.personJson.content).map(function (key) {
              return that.personJson.content[key];
            })
          },
          {
            id: 3,
            data: Object.keys(that.personJson.content).map(function (key) {
              return that.personJson.max - that.personJson.content[key];
            })
          },
          {
            id: 4,
            data: Object.keys(that.orgJson.content).map(function (key) {
              return {
                name: key + "(" + (that.orgJson.content[key] / that.orgJson.num * 100).toFixed(1) + "%)",
                value: that.orgJson.content[key]
              };
            })
          },
          {
            id: 5,
            data: Object.keys(that.personJson.content).map(function (key) {
              return {
                name: key + "(" + (that.personJson.content[key] / that.personJson.num * 100).toFixed(1) + "%)",
                value: that.personJson.content[key]
              };
            })
          }
        ]
      });
      punishChart.hideLoading();

      let orgDetailChart = echarts.getInstanceByDom(document.getElementById("orgDetailInfo"));
      orgDetailChart.setOption({
        title: [
          {
            id: 0,
            text: that.years + "年" + month + "单位处罚数据汇总",
            subtext: "总计 " + that.orgDetailJson.num,
          },
          {
            id: 1,
            text: that.years + "年" + month + "单位罚金数据汇总(单位：万元)",
            subtext: "总计 " + that.orgDetailFineJson.num,
          },
          {
            id: 2,
            text: that.years + "年" + month + "单位处罚分布",
            subtext: "总计 " + that.orgDetailJson.num,
          },
          {
            id: 3,
            text: that.years + "年" + month + "单位罚金分布(单位：万元)",
            subtext: "总计 " + that.orgDetailFineJson.num,
          }
        ],
        xAxis: [
          {
            id: 0,
            max: that.orgDetailJson.max,
          },
          {
            id: 1,
            max: that.orgDetailFineJson.max,
          }
        ],
        yAxis: [
          {
            id: 0,
            data: Object.keys(that.orgDetailJson.content),
          },
          {
            id: 1,
            data: Object.keys(that.orgDetailFineJson.content),
          }
        ],
        series: [
          {
            id: 0,
            data: Object.keys(that.orgDetailJson.content).map(function (key) {
              return that.orgDetailJson.content[key];
            })
          },
          {
            id: 1,
            data: Object.keys(that.orgDetailJson.content).map(function (key) {
              return that.orgDetailJson.max - that.orgDetailJson.content[key];
            })
          },
          {
            id: 2,
            data: Object.keys(that.orgDetailFineJson.content).map(function (key) {
              return that.orgDetailFineJson.content[key];
            })
          },
          {
            id: 3,
            data: Object.keys(that.orgDetailFineJson.content).map(function (key) {
              return that.orgDetailFineJson.max - that.orgDetailFineJson.content[key];
            })
          },
          {
            id: 4,
            data: Object.keys(that.orgDetailJson.content).map(function (key) {
              return {
                name: key + "(" + (that.orgDetailJson.content[key] / that.orgDetailJson.num * 100).toFixed(1) + "%)",
                value: that.orgDetailJson.content[key]
              };
            })
          },
          {
            id: 5,
            data: Object.keys(that.orgDetailFineJson.content).map(function (key) {
              return {
                name: key + "(" + (that.orgDetailFineJson.content[key] / that.orgDetailFineJson.num * 100).toFixed(1) + "%)",
                value: that.orgDetailFineJson.content[key]
              };
            })
          }
        ]
      });
      orgDetailChart.hideLoading();

      let punishFineChart = echarts.getInstanceByDom(document.getElementById("punishmentFineInfo"));
      punishFineChart.setOption({
        title: [
          {
            id: 1,
            text: that.years + "年" + month + "监管层级罚单笔数分布",
            subtext: "总计 " + that.pieJson.num,
          },
          {
            id: 3,
            text: that.years + "年" + month + "监管层级处罚金额分布(单位: 万元)",
            subtext: "总计 " + that.pieFineJson.num,
          }
        ],
        xAxis: [],
        yAxis: [],
        series: [
          {
            id: 3,
            data: Object.keys(that.pieJson.content).map(function (key) {
              return {
                name: key + "(" + (that.pieJson.content[key] / that.pieJson.num * 100).toFixed(1) + "%)",
                value: that.pieJson.content[key]
              };
            })
          },
          {
            id: 4,
            data: Object.keys(that.pieFineJson.content).map(function (key) {
              return {
                name: key + "(" + (that.pieFineJson.content[key] / that.pieFineJson.num * 100).toFixed(1) + "%)",
                value: that.pieFineJson.content[key]
              };
            })
          }
        ]
      });
      punishFineChart.hideLoading();
    }
  }

};
</script>

<style scoped>
@import "../../src/assets/styles/wrapper.css";
@import "../../src/assets/styles/fileAnalysis.css";

.switchContainer {
  height: 30px;
  width: 100%;
  display: flex;
  margin-top: 1.3rem;
  margin-left: 5%;
}
</style>
